<template>
    <div>
      <!-- 面包屑导航区 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户列表</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 卡片视图区域 -->
      <el-card>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-input v-model="parameter.phone" placeholder="请输入手机号"></el-input>
          </el-col>
          <el-col :span="6">
            <el-button type="primary"  @click="checked">查询</el-button>
            <el-button type="info" @click="resrt">重置</el-button>
          </el-col>
        </el-row>
        <!-- 表格 -->
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            type="index"
            width="50">
          </el-table-column>
          <el-table-column
            label="头像" >
            <template slot-scope="scope">
              <el-avatar :src="getImg(scope.row.avatar)"></el-avatar>
            </template>
          </el-table-column>
          <el-table-column
            label="用户名">
            <template slot-scope="scope">
              <div slot="reference" class="name-wrapper">
                {{ scope.row.username }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="手机号" >
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.phone }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="角色" >
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.types }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="余额" >
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.balance }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="注册时间" >
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{scope.row.createdTime | dateFormat}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="handleEdit(scope.$index, scope.row)">充值</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 页码 -->
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="parameter.currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="parameter.pageSize"
            layout="sizes, prev, pager, next"
            :total="totle">
          </el-pagination>
        </div>
      </el-card>
      <addBalance ref="addBalance" @closeHandler="closeDialog"/>
    </div>
</template>

<script>
import addBalance from './dialog/addBalance.vue'
import { GetAllInfo } from '@/api/userManagement/userList'
export default {
  components: { addBalance },
  data () {
    return {
      tableData: [],
      activeIndex: 1,
      totle: 1,
      parameter: {
        currentPage: 1, // 当前页数
        pageSize: 10, // 每页记录数
        types: null, // 用户类型
        phone: null // 用户手机号
      }
    }
  },
  mounted () {
    this.userList()
  },
  methods: {
    handleEdit (index, row) {
      console.log(index, row)
      this.$refs.addBalance.init(row)
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.parameter.pageSize = val
      this.userList()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.parameter.currentPage = val
      this.userList()
    },
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
    },
    // 获得用户列表数据
    async userList () {
      // GetAllInfo(this.parameter).then((res)=>{
      //   this.tableData = res.data.dota
      //   this.totle = res.data.totle
      //   console.log(res.data.totle)
      // })
    },
    closeDialog () {
      this.userList()
    },
    checked () {
      this.userList()
    },
    resrt () {
      this.parameter.phone = null
      this.userList()
    },
    getImg (url) {
      return this.BaseURL + url
    }
  }
}
</script>

  <style lang="scss" scoped>

  </style>
